<!-- 商户申请审核 -->
<template>
  <div class="app-container">
    <div class="search-bar">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="queryParams.mobile" placeholder="请输入手机号" clearable style="width: 240px" />
        </el-form-item>
        <el-form-item label="小区" prop="neighborhood">
          <el-input v-model="queryParams.neighborhood" placeholder="请输入小区" clearable style="width: 240px" />
        </el-form-item>
        <el-form-item label="门牌号" prop="ownName">
          <el-input v-model="queryParams.correctHouseNumber" placeholder="请输入门牌号" clearable style="width: 240px" />
        </el-form-item>
        <el-form-item label="户主名称" prop="ownName">
          <el-input v-model="queryParams.ownName" placeholder="请输入户主名称" clearable style="width: 240px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="initList">搜索</el-button>
          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <base-page-table :table-data="tableData" :table-columns-data="tableColumnsData" :loading="loading"
      :page-num="queryParams.pageNum" :page-size="queryParams.pageSize" :total="queryParams.total"
      @handleQuery="handleQuery">
      <template #status="scope">
        <el-tag :type="statusList[scope.row.status].type">
          {{ statusList[scope.row.status].label }}
        </el-tag>
      </template>
      <template #userType="scope">
        <el-tag type="primary" class="margin-r-10">
          {{ SETTLE_TYPE_OBJECT[scope.row.userType] }}
        </el-tag>
      </template>
      <template #correctOwnName="{ row }">
        <el-input v-model="row.correctOwnName" placeholder="请输入" :disabled="row.status === 1">
          <template #append>
            <el-button @click="updateOwnName(row)" :disabled="row.status === 1">确定</el-button>
          </template>
        </el-input>
      </template>
      <template #correctHouseNumber="{ row }">
        <el-input v-model="row.correctHouseNumber" placeholder="请输入" :disabled="row.status === 1">
          <template #append>
            <el-button @click="updateName(row)" :disabled="row.status === 1">确定</el-button>
          </template>
        </el-input>
      </template>
      <template #handle="scope">
        <el-button link type="primary" :disabled="scope.row.status == 1 || scope.row.status == 2"
          @click="handleAudit(scope.row, MERCHANT_APPLY_AUDIT_STATUS_WORD['入驻通过'])">
          通过
        </el-button>
        <el-button link type="danger" :disabled="scope.row.status == 1 || scope.row.status == 2"
          @click="handleAuditError(scope.row)">
          驳回
        </el-button>
        <el-button link type="primary" @click="handleDetail(scope.row)">查看</el-button>
      </template>
    </base-page-table>
  </div>
  <Detail v-model:visible="detailVisible" :row="activeRow" :type="company" />
  <AuditError v-model:visible="auditErrorVisible" @update:auditDesc="
    (auditDesc) => handleAudit(activeRow, MERCHANT_APPLY_AUDIT_STATUS_WORD['入驻失败'], auditDesc)
  " />
</template>
<script setup>
import Detail from "./Detail.vue";
import AuditError from "./AuditError.vue";
import {auditHouse, updateConsumer, updateConsumerOwnName} from "@/api/apply/audit";
import { getHouseAuditList } from "@/api/apply/audit";
import { MERCHANT_APPLY_AUDIT_STATUS_WORD } from "@/utils/enums/merchant";
import { SETTLE_TYPE_LIST, SETTLE_TYPE_OBJECT } from "@/utils/enums/system";
import {
  HOUSE_AUTHENTICATION_STATUS_ENUM,
} from "./utils/enum";
const queryParams = reactive({
  mobile: "",
  neighborhood: "",
  ownName: "",
  pageNum: 1,
  pageSize: 10,
  correctHouseNumber: '',
  correctOwnName: '',
});
const statusList = ref(HOUSE_AUTHENTICATION_STATUS_ENUM);
const queryFormRef = ref();
const tableData = ref([]);
const tableColumnsData = ref([
  {
    type: "index",
    label: "序号",
    width: "60",
    align: "center",
  },
  {
    label: "房屋地址",
    prop: "region",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "户主姓名",
    prop: "ownName",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "矫正户主姓名",
    prop: "correctOwnName",
    align: "center",
    showOverflowTooltip: true,
    customSlot: 'correctOwnName'
  },
  {
    label: "手机号码",
    prop: "mobile",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "小区名称",
    prop: "neighborhood",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "门牌号",
    prop: "houseNumber",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "矫正门牌号",
    prop: "correctHouseNumber",
    align: "center",
    showOverflowTooltip: true,
    customSlot: 'correctHouseNumber'
  },
  {
    label: "状态",
    prop: "status",
    align: "center",
    showOverflowTooltip: true,
    customSlot: "status",
  },
  {
    label: "申请时间",
    prop: "applyTime",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "操作",
    prop: "handle",
    align: "center",
    customSlot: "handle",
    showOverflowTooltip: true,
  },
]);
const handleAudit = (row, status, auditDesc = "") => {
  funcAuditHouse({
    id: row.id,
    status: status,
    auditDesc: auditDesc,
    correctHouseNumber: row.correctHouseNumber || row.houseNumber,
    correctOwnName: row.correctOwnName || row.ownName,
  });
};
/**
 * 详情展示
 */
const detailVisible = ref(false);
const activeRow = ref({});
const handleDetail = (row) => {
  console.log(row, "row");
  detailVisible.value = true;
  activeRow.value = row;
};
/**
 * 驳回弹窗
 */
const auditErrorVisible = ref(false);
const handleAuditError = (row) => {
  auditErrorVisible.value = true;
  activeRow.value = row;
};
/**
 * 请求相关
 *
 */
//获取申请列表
const loading = ref(false);
const funcGetHouseAuditList = async () => {
  try {
    loading.value = true;
    const res = await getHouseAuditList(queryParams);
    if (res.data.length > 0) {
      for (let i = 0; i < res.data.length; i++) {
        const bedroom = res.data[i].bedroom || 0
        const livingRoom = res.data[i].livingRoom || 0
        const bathroom = res.data[i].bathroom || 0
        res.data[i].floorPlan = bedroom + '房' + livingRoom + '厅' + bathroom + '卫'
      }
    }
    tableData.value = res.data;
    queryParams.total = res.total;
    // 刷新列表
  } catch (err) {
    console.log(err);
  } finally {
    loading.value = false;
  }
};
//审核房屋
const funcAuditHouse = async (params) => {
  try {
    const res = await auditHouse(params);
    funcGetHouseAuditList();
    // 刷新列表
    console.log(res);
  } catch (err) {
    console.log(err);
  } finally {
  }
};
function handleResetQuery() {
  queryFormRef.value.resetFields();
  initList();
}
function handleQuery(val) {
  queryParams.pageNum = val.pageNum;
  queryParams.pageSize = val.pageSize;
  funcGetHouseAuditList();
}
function initList() {
  queryParams.pageNum = 1;
  funcGetHouseAuditList();
}
async function updateName(row) {
  console.log(row);
  const data = {
    id: row.id,
    correctHouseNumber: row.correctHouseNumber,
    regionCode: row.regionCode,
  }
  try {
    await updateConsumer(data)
    funcGetHouseAuditList();

  } catch (err) {
    console.log(err);
  } finally {
  }

}

async function updateOwnName(row) {
  console.log(row);
  const data = {
    id: row.id,
    correctOwnName: row.correctOwnName
  }
  try {
    const res = await updateConsumerOwnName(data)
    if(res.code == 200){
      ElMessage.success("矫正户主名称修改成功");
    }
    funcGetHouseAuditList();

  } catch (err) {
    console.log(err);
  } finally {
  }

}
onMounted(() => {
  funcGetHouseAuditList();
});
</script>
